<template>
  <div class="GykjMap-building clear">
    <div class="GykjMap-building-info pull-left">
      <table border class="table">
        <tbody>
          <tr>
            <td class="key">所在地（区镇）</td>
            <td>{{fliterData('WHERETOWN')}}</td>
          </tr>
          <tr>
            <td class="key">所属河道</td>
            <td>{{fliterData('whereriver')}}</td>
          </tr>
          <tr>
            <td class="key">堤防桩号即堤围桩号</td>
            <td>{{fliterData('pilenum')}}</td>
          </tr>
          <tr>
            <td class="key">建（构）筑物名称</td>
            <td>{{fliterData('GykjMap-building')}}</td>
          </tr>
          <tr>
            <td class="key">占用面积即占地面积</td>
            <td>{{fliterData('measure')}}</td>
          </tr>
          <tr>
            <td class="key">层数</td>
            <td>{{fliterData('floor')}}</td>
          </tr>
          <tr>
            <td class="key">位于 堤内/堤身/堤外</td>
            <td>{{fliterData('atarea')}}</td>
          </tr>
          <tr>
            <td class="key">建设年份</td>
            <td>{{fliterData('builtyear')}}</td>
          </tr>
          <tr>
            <td class="key">是否历史建（构）筑物</td>
            <td>{{fliterData('ishistory')}}</td>
          </tr>
          <tr>
            <td class="key">是否办理水利手续</td>
            <td>{{fliterData('hascert')}}</td>
          </tr>
          <tr>
            <td class="key">创建时间</td>
            <td>{{fliterData('createtime')}}</td>
          </tr>
          <tr>
            <td class="key">地址</td>
            <td>{{fliterData('address')}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="GykjMap-building-img pull-left">
      <img @dblclick="scaleImg" v-if="resultData.filename" :src="`http://183.238.82.210:8090/ztGykjMap-buildingreg/photo/${resultData.filename}`">
      <div v-else class="GykjMap-building-noPicture"></div>
    </div>

    <transition name="animate-mask">
      <div
        v-show="isScaleImg"
        class="GykjMap-building-scaleImg"
        @click="closeScaleImg">
        <div class="close" @click.stop="closeScaleImg">
          <Icon type="close-round" size="30"></Icon>
        </div>
        <div class="img" @click.stop>
          <img :src="`http://183.238.82.210:8090/ztGykjMap-buildingreg/photo/${resultData.filename}`" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {},
      isScaleImg: false
    }
  },
  methods: {
    scaleImg () {
      this.isScaleImg = true
    },
    closeScaleImg () {
      this.isScaleImg = false
    },
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-building {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .GykjMap-building-info {
    width: 50%;
    height: 100%;
    padding: 5px;
    > .table {
      width: 100%;
      tr {
        > td {
          padding: 5px;
          &.key {
            width: 140px;
          }
        }
      }
    }
  }
  .GykjMap-building-img {
    width: 50%;
    height: 100%;
    text-align: center;
    padding: 5px 0;
    img {
      max-width: 100%;
      height: 100%;
    }
    .GykjMap-building-noPicture {
      width: 100%;
      height: 100%;
      text-align: center;
      background-image: url("./img/noPicture.png");
      background-position: center 35%;
      background-repeat: no-repeat;
    }
  }
  .GykjMap-building-scaleImg {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    > .close {
      position: absolute;
      right: 50px;
      top: 50px;
      color: white;
      cursor: pointer;
      &:hover {
        color: #ddd;
      }
    }
    > .img {
      width: 80%;
      height: 80%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      > img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
